<template>
<div class='historySystem'>
  <at-tabs  type="border-card" v-model="activeName" @tab-click="handleClick">
    <at-tab-pane label="新增信息系统信息" name="add">
      <div class='contain_box'>
        <div class='table_title'>新增同步历史</div>
        <div class='title_box'>
          <at-search 
          class='search_input'
          project='mh' 
          :placeholder='searchTitle' 
          type="text" v-model='value' 
          icon="search" 
          :on-icon-click="handleIconClick" >
          </at-search>
        </div>
        <div class='table_box'>
          <at-table 
          :data='history_add.table'
          @sort-change = "sortChange" 
          >  
          <at-table-column label='同步时间' prop='er_time' sortable="custom" min-width='160px'></at-table-column>
              <at-table-column label='信息系统编号' prop='asystem_id' min-width='160px'></at-table-column>        
              <at-table-column label='信息系统名称' prop='asystem_name_change' min-width='160px'></at-table-column>
              <at-table-column label='信息系统描述' prop='asystem_desc_change' min-width='160px'></at-table-column>
              <at-table-column label='信息系统代码' prop='asys_code_change' min-width='130px'></at-table-column>
              <at-table-column label='url地址' prop='aurl_change' min-width='160px'></at-table-column>
              <at-table-column label='所属机构' prop='aagency_name_change' min-width='160px'></at-table-column>
          </at-table>
        </div> 
        <div style='text-align:center;margin:20px;'>
          <Pagination 
          :currentPage="history_add.tableData.pagination.current" 
          :total="history_add.total" 
          :pageSizes="pageSizes" 
          :pageSize="history_add.tableData.pagination.pageSize" 
          layout='total, sizes, prev, pager, next, jumper'
          @current-change="handleCurrentChange" 
          @size-change="handleSizeChange"
          >
          </Pagination>
        </div> 
      </div>
    </at-tab-pane>
    <at-tab-pane label="修改信息系统信息" name="update">
      <div class='contain_box'>
        <div class='table_title'>修改同步历史</div>
        <div class='title_box'>
          <at-search class='search_input' project='mh' :placeholder='searchTitle' type="text" v-model='value' icon="search" :on-icon-click="handleIconClick" ></at-search>
        </div>
        <div class='table_box'>
          <at-table 
          :data='history_edit.table'
          @sort-change = "sortChange" 
          ref="update"
          >  
           <at-table-column label='同步时间' prop='er_time' sortable="custom" min-width='160px'></at-table-column>
              <at-table-column label='信息系统编号' prop='asystem_id' min-width='160px'></at-table-column>        
              <at-table-column label='信息系统名称' prop='asystem_name_change' min-width='160px'></at-table-column>
              <at-table-column label='信息系统描述' prop='asystem_desc_change' min-width='160px'></at-table-column>
              <at-table-column label='信息系统代码' prop='asys_code_change' min-width='130px'></at-table-column>
              <at-table-column label='url地址' prop='aurl_change' min-width='160px'></at-table-column>
              <at-table-column label='所属机构' prop='aagency_name_change' min-width='160px'></at-table-column>
          </at-table>
        </div>  
        <div style='text-align:center;margin:20px;'>
          <Pagination 
          :currentPage="history_edit.tableData.pagination.current" 
          :total="history_edit.total" 
          :pageSizes="pageSizes" 
          :pageSize="history_edit.tableData.pagination.pageSize" 
          layout='total, sizes, prev, pager, next, jumper'
          @current-change="handleCurrentChange" 
          @size-change="handleSizeChange"
          >
          </Pagination>
        </div>
      </div>
    </at-tab-pane>
    <at-tab-pane label="删除信息系统信息" name="delete">
      <div class='contain_box'>
        <div class='table_title'>删除同步历史</div>
        <div class='title_box'>
          <at-search class='search_input' project='mh' :placeholder='searchTitle' type="text" v-model='value' icon="search" :on-icon-click="handleIconClick" ></at-search>
        </div>
        <div class='table_box'>
          <at-table 
          :data='history_del.table'
          :show-header='true'
          :border='false'
          @sort-change = "sortChange" 
          >  
           <at-table-column label='同步时间' prop='er_time' sortable="custom" min-width='160px'></at-table-column>
              <at-table-column label='信息系统编号' prop='asystem_id' min-width='160px'></at-table-column>        
              <at-table-column label='信息系统名称' prop='asystem_name_change' min-width='160px'></at-table-column>
              <at-table-column label='信息系统描述' prop='asystem_desc_change' min-width='160px'></at-table-column>
              <at-table-column label='信息系统代码' prop='asys_code_change' min-width='130px'></at-table-column>
              <at-table-column label='url地址' prop='aurl_change' min-width='160px'></at-table-column>
              <at-table-column label='所属机构' prop='aagency_name_change' min-width='160px'></at-table-column>
          </at-table>
        </div>  
        <div style='text-align:center;margin:20px;'>
          <Pagination 
          :currentPage="history_del.tableData.pagination.current" 
          :total="history_del.total" 
          :pageSizes="pageSizes" 
          :pageSize="history_del.tableData.pagination.pageSize" 
          layout='total, sizes, prev, pager, next, jumper'
          @current-change="handleCurrentChange" 
          @size-change="handleSizeChange"
          >
          </Pagination>
        </div>
      </div>
    </at-tab-pane>
  </at-tabs>

</div>
</template>
<script>
  import { mapState } from 'vuex'
  import { debounce } from '../../../../components/business/common.js'
  export default {
    name: 'historySystem',
    data () {
      return {
        input: '',
        value: '',
        total: '',
        searchTitle: '请输入系统名称',
        activeName: 'add',
        currentPage: 1,
        totalpage: 0,
        pageSizes: [20, 40, 60, 80],
        pageSize: 20
      }
    },
    computed: {
      ...mapState({
        history_add: state => state.informationSystem.history_add,
        history_edit: state => state.informationSystem.history_edit,
        history_del: state => state.informationSystem.history_del
      })
    },
    created () {
      this.$store.dispatch('/informationSystem/gethisadd', { 'type': 'add' })
      this.$store.dispatch('/informationSystem/gethisupdate', { 'type': 'update' })
      this.$store.dispatch('/informationSystem/gethisdelete', { 'type': 'delete' })
    },
    methods: {
      handleClick: debounce(function (tab, type) {
        this.activeName = tab.name
        this.history_add.tableData.pagination.current = 1
        this.history_add.tableData.pagination.pageSize = 20
        this.history_add.tableData.search.value = ''
        this.history_edit.tableData.pagination.current = 1
        this.history_edit.tableData.pagination.pageSize = 20
        this.history_edit.tableData.search.value = ''
        this.history_del.tableData.pagination.current = 1
        this.history_del.tableData.pagination.pageSize = 20
        this.history_del.tableData.search.value = ''
        this.value = ''
        if (this.activeName === 'add') {
          this.$store.dispatch('/informationSystem/gethisadd', { 'type': 'add' })
        } else if (this.activeName === 'update') {
          this.$store.dispatch('/informationSystem/gethisupdate', { 'type': 'update' })
        } else if (this.activeName === 'delete') {
          this.$store.dispatch('/informationSystem/gethisdelete', { 'type': 'delete' })
        }
      }, 500, true),
      handleCurrentChange (page) {
        if (this.activeName === 'add') {
          this.$store.dispatch('/informationSystem/gethisadd', {
            type: 'pagCur',
            page: page
          })
        } else if (this.activeName === 'update') {
          this.$store.dispatch('/informationSystem/gethisupdate', {
            type: 'pagCur',
            page: page
          })
        } else if (this.activeName === 'delete') {
          this.$store.dispatch('/informationSystem/gethisdelete', {
            type: 'pagCur',
            page: page
          })
        }
      },
      //  改变每一页条数
      handleSizeChange (pageSizes) {
        if (this.activeName === 'add') {
          this.$store.dispatch('/informationSystem/gethisadd', {
            type: 'pagSize',
            pageSizes: pageSizes
          })
        } else if (this.activeName === 'update') {
          this.$store.dispatch('/informationSystem/gethisupdate', {
            type: 'pagSize',
            pageSizes: pageSizes
          })
        } else if (this.activeName === 'delete') {
          this.$store.dispatch('/informationSystem/gethisdelete', {
            type: 'pagSize',
            pageSizes: pageSizes
          })
        }
      },
      //  搜索
      handleIconClick () {
        if (this.activeName === 'add') {
          this.$store.dispatch('/informationSystem/gethisadd', {
            type: 'search',
            value: this.value,
            currentPage: this.currentPage
          })
        } else if (this.activeName === 'update') {
          this.$store.dispatch('/informationSystem/gethisupdate', {
            type: 'search',
            value: this.value,
            currentPage: this.currentPage
          })
        } else if (this.activeName === 'delete') {
          this.$store.dispatch('/informationSystem/gethisdelete', {
            type: 'search',
            value: this.value,
            currentPage: this.currentPage
          })
        }
      },
      // 排序
      sortChange ({ column, prop, order }) {
        if (order !== null) {
        } else {
          prop = 'er_time'
          order = 'ascending'
        }
        if (this.activeName === 'add') {
          this.$store.dispatch('/informationSystem/gethisadd', {
            type: 'sorter',
            key: prop,
            value: order.slice(0, -3)
          })
        } else if (this.activeName === 'update') {
          this.$store.dispatch('/informationSystem/gethisupdate', {
            type: 'sorter',
            key: prop,
            value: order.slice(0, -3)
          })
        } else if (this.activeName === 'delete') {
          this.$store.dispatch('/informationSystem/gethisdelete', {
            type: 'sorter',
            key: prop,
            value: order.slice(0, -3)
          })
        }
      }
    }
  }
</script>
<style lang='less'>
 .historySystem {
   border:1px solid #eeeeee;
  .search_input {
    margin-top:10px;
    float:right;
    margin-right: 20px;
  }
  .title_box {
    height:40px;
  }
  .contain_box {
    border:1px solid #eeeeee;
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;

  }
  .table_title {
    color:#5c6781;
    font-size:14px;
    height:50px;
    border-bottom:1px solid #eeeeee;
    padding-left:20px;
    line-height:50px;
    font-weight:bold;

  }
  .at-tabs--border-card>.at-tabs__header .at-tabs__item:last-child {
    margin-right: 5px;
  }
  .at-tabs__nav-scroll {
      background: #ECF0F5;
  }
  .at-tabs--border-card>.at-tabs__header .at-tabs__item.is-active {
      color: #5c6781;
      border: none;
      border-bottom: none;
      background-color: #fff;
  }
  .table_box {
    margin-left: 20px;
    margin-right:20px;
  }
  .at-tabs--border-card>.at-tabs__header .at-tabs__item{
    transition:none
  }

}
</style>